﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

    <title>字典</title>

    <meta name="keywords" content="netnr,NET牛人,zidian,字典" />
    <meta name="description" content="netnr,NET牛人,zidian,字典" />

    <link href="https://code.bdstatic.com/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://code.bdstatic.com/npm/netnrmd@2.2.3/src/netnrmd.css" rel="stylesheet" />

</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12 my-4 netnrmd-body">
                <h1>zidian</h1>
                <p>汉字、词语、成语查询接口</p>
                <h3>Demo <a href="https://zidian.netnr.com">https://zidian.netnr.com</a></h3>
                <h3>引言</h3>
                <ul>
                    <li>数据来源于开源项目 <a href="https://github.com/pwxcoo/chinese-xinhua">https://github.com/pwxcoo/chinese-xinhua</a></li>
                    <li>而该项目的数据是一个<code>JSON</code>文件，大小超出 <code>20M</code>，不利于页面加载使用，所以拆分了文件</li>
                    <li>提取字、词、成语为数组，根据数组索引分页生成详情，具体请看 <code>build/parse.html</code> 的拆分脚本</li>
                </ul>
                <h3>使用</h3>
                <p>引入</p>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"dist/zidian.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre><p>npm 安装</p>
<pre><code><span class="hljs-built_in">npm</span> install zidian</code></pre><p>查看：<a href="https://unpkg.com/zidian/">https://unpkg.com/zidian/</a></p>
                <p>汉字查询</p>
<pre><code class="language-js">zidian.equalWord(key)

zidian.equalWord(<span class="hljs-string">"爱"</span>).then(<span class="hljs-built_in">console</span>.log)
</code></pre>
                <p>词语查询</p>
<pre><code class="language-js">zidian.equalCi(key)

zidian.equalCi(<span class="hljs-string">"美丽"</span>).then(<span class="hljs-built_in">console</span>.log)
</code></pre>
                <p>成语查询</p>
<pre><code class="language-js">zidian.equalIdiom(key)

zidian.equalIdiom(<span class="hljs-string">"叶公好龙"</span>).then(<span class="hljs-built_in">console</span>.log)
</code></pre>
                <p>词语模糊搜索</p>
<pre><code class="language-js">zidian.likeCi(key)

zidian.likeCi(<span class="hljs-string">"美"</span>).then(<span class="hljs-built_in">console</span>.log)
</code></pre>
                <p>成语模糊搜索</p>
<pre><code class="language-js">zidian.likeIdiom(key)

zidian.likeIdiom(<span class="hljs-string">"三百"</span>).then(<span class="hljs-built_in">console</span>.log)
</code></pre>
                <h3>说明</h3>
                <ul>
                    <li>接口查询返回一个  <code>Promise</code>  对象</li>
                    <li>查询的接口会缓存到 <code>zidian.cache</code> 对象</li>
                    <li>查询无记录时，返回 <code>null</code></li>
                    <li><code>zidian.config.host</code> 可配置请求源</li>
                </ul>
            </div>
        </div>

        <hr class="my-5" />

        <div class="row">
            <div class="col-md-12">

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">汉字</span>
                    </div>
                    <input class="form-control" id="txt1" placeholder="输入一个汉字，如：爱" maxlength="1" />
                </div>

                <div class="input-group my-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">词语</span>
                    </div>
                    <input class="form-control" id="txt2" placeholder="输入一个词语，如：美丽" maxlength="20" />
                </div>

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">成语</span>
                    </div>
                    <input class="form-control" id="txt3" placeholder="输入一个成语，如：一言既出，驷马难追" maxlength="20" />
                </div>

                <textarea id="res" class="w-100 my-3" rows="15" placeholder="输出结果"></textarea>

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">词语 模糊搜索</span>
                    </div>
                    <input class="form-control" id="txt4" placeholder="输入一个词语的关键字" maxlength="20" />
                </div>

                <div class="input-group my-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">成语 模糊搜索</span>
                    </div>
                    <input class="form-control" id="txt5" placeholder="输入一个成语的关键字" maxlength="20" />
                </div>
            </div>
        </div>
    </div>

    <script src="dist/zidian.js"></script>

    <script>

        function iszhcn(s) {
            return escape(s).indexOf("%u") >= 0;
        }

        //zidian.config.host = "https://unpkg.com/zidian@0.0.1";

        var res = document.getElementById('res');

        document.getElementById('txt1').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key[0])) {
                zidian.equalWord(key[0]).then(function (info) {
                    res.value = info ? JSON.stringify(info, null, 4) : "无记录";
                })
            } else {
                res.value = "请输入中文";
            }
        }, false);

        document.getElementById('txt2').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                zidian.equalCi(key).then(function (info) {
                    res.value = info ? JSON.stringify(info, null, 4) : "无记录";
                })
            } else {
                res.value = "请输入一个词语";
            }
        }, false);

        document.getElementById('txt3').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                zidian.equalIdiom(key).then(function (info) {
                    res.value = info ? JSON.stringify(info, null, 4) : "无记录";
                })
            } else {
                res.value = "请输入一个成语";
            }
        }, false);

        document.getElementById('txt4').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                zidian.likeCi(key).then(function (info) {
                    res.value = info ? JSON.stringify(info, null, 4) : "无记录";
                })
            } else {
                res.value = "请输入一个词语的关键字";
            }
        }, false);


        document.getElementById('txt5').addEventListener('input', function () {
            var key = this.value.trim();
            if (key == "") {
                res.value = "";
            } else if (iszhcn(key)) {
                zidian.likeIdiom(key).then(function (info) {
                    res.value = info ? JSON.stringify(info, null, 4) : "无记录";
                })
            } else {
                res.value = "请输入一个成语的关键字";
            }
        }, false);
    </script>

</body>
</html>